<template>
  <div>
    <div style="background:#1D334F;color:white;padding:15px 12px;">
      欢迎使用
      <el-button class="logout-btn" type="text" @click="logout">退出</el-button>
    </div>
    <container :out-height="50" @resize="resize">
      <el-form :inline="true">
        <el-form-item label="显示数据日期">
          <el-date-picker
            v-model="showDate"
            @change="fetchData"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type='primary' @click="fetchData">刷新</el-button>
          <a :href="downUrl" target="_blank" class="a-export-btn">导出数据</a>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        border
        stripe
        :max-height="maxHeight"
        :row-class-name="tableRowClassName">
        <el-table-column
          fixed
          width="250"
          label="店名">
          <template scope="scope">
            {{scope.row.name}} <el-button size="mini" v-if="scope.row.nodata!==true" type="text" @click="back(scope.row.id)">(退回修改)</el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-for="item in list"
          :key="item.id"
          :label="item.name+'/'+item.unit"
          :prop="item.id"
          width="120">
        </el-table-column>
        <!-- <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </container>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import * as module from '../index.model';
import Global from 'system.global';

const g = Global();
export default Vue.proxyVue({
  module,
  init(initData){
    return {
      tableData: [] as any[],
      tableColumns:[] as any[],
      maxHeight:0,
      showDate:new Date(),
      modelData:initData,
      userMap:{} as {[key:string]:string},
      list:[] as any[],
      tableRowClassName({row}:any){
        if (row.nodata) {
          return 'warning-row';
        }
        return '';
      }
    };
  },
  async mounted(){
    const res = await this.trigger.fetchTableData();
    if(res==null)return;
    const userMap:{[key:string]:string} = {};
    res.users.forEach((n:any)=>{
      if(n.status!=2)return;
      userMap[n.id] = n.name;
    })
    this.userMap = userMap;
    this.list = res.list;
    this.fetchData();
  },
  methods:{
    resize({h}:{h:number}){
      this.maxHeight = h - 70;
    },
    async back(id:string){
      await this.$confirm('确认退回订单状态','确定提醒');
      const flag = await this.trigger.back2Modify(this.showDate.format('yyyyMMdd'),id);
      flag&&this.fetchData();
    },
    async logout(){
      await this.$confirm('确定退出系统？',"提醒");
      const flag = await this.trigger.logout();
      flag&&(window.location.href = g.staticPath);
    },
    async fetchData(){
      if(this.showDate==null)return;
      const d = this.showDate.format('yyyyMMdd');
      const res = await this.trigger.dailyData(d);
      if(res==null)return;
      const need = {...this.userMap};
      const last:any = {name:"合计"};
      const tableData = res.map((n:any)=>{
        const t:any = {name:need[n.id],id:n.id};
        delete need[n.id];
        n.list.forEach((m:any)=>{
          t[m.id] = m.data;
          last[m.id] =(last[m.id]||0)+ parseFloat(m.data);
        })
        return t;
      })
      Object.keys(need).forEach(n=>{
        tableData.push({name:this.userMap[n],nodata:true});
      })
      last.nodata=true;
      tableData.push(last);
      this.tableData = tableData;
      this.$message("数据已更新");
    }
  },
  computed:{
    downUrl():string{
      return `${g.path}/export?date=${this.showDate.format('yyyyMMdd')}`
    }
  }
})
</script>
<style lang="less">
.el-table .warning-row {
  background: #fdf5e6;
}
</style>

<style lang="less" scoped>
.a-export-btn{
  text-decoration: underline;
  color: white;
  display: inline-block;
  background: rgb(64, 158, 255);
  padding: 0 12px;
  border-radius: 4px;
}
.a-export-btn:hover{
  background: rgb(89, 168, 248);
}
.logout-btn{
  float: right;
  margin-right:20px;
  line-height: 22px;
  height: 22px;
  padding: 0;
  color: white;
}
</style>

